<template>
	<scroll-view scroll-y class="tab-component-page-scroll-view">
		<view class="tab-component-page-model">
			<view class="tab-component-page-model-title-container">
				<text class="tab-component-page-model-title">1.容器</text>
			</view>
			<view class="tab-component-page-model-item-container" @click="goComponentPage('/pages/tabBar/tabComponentPage/container/view/view')">
				<text class="tab-component-page-model-item-name">view视图</text>
			</view>
		</view>

		<view class="tab-component-page-model">
			<view class="tab-component-page-model-title-container">
				<text class="tab-component-page-model-title">2.基础内容</text>
			</view>
			<view class="tab-component-page-model-item-container" @click="goComponentPage('/pages/tabBar/tabComponentPage/basicContent/text/text')">
				<text class="tab-component-page-model-item-name">text文本编辑</text>
			</view>
			<view class="tab-component-page-model-item-container" @click="goComponentPage('/pages/tabBar/tabComponentPage/basicContent/icon/icon')">
				<text class="tab-component-page-model-item-name">icon图标</text>
			</view>
		</view>

		<view class="tab-component-page-model">
			<view class="tab-component-page-model-title-container">
				<text class="tab-component-page-model-title">3.表单组件</text>
			</view>
			<view class="tab-component-page-model-item-container">
				<text class="tab-component-page-model-item-name" @click="goComponentPage('/pages/tabBar/tabComponentPage/formComponent/button/button')">button按钮</text>
			</view>
			<view class="tab-component-page-model-item-container" @click="goComponentPage('/pages/tabBar/tabComponentPage/formComponent/checkbox/checkbox')">
				<text class="tab-component-page-model-item-name">checkbox多选框</text>
			</view>
			<view class="tab-component-page-model-item-container" @click="goComponentPage('/pages/tabBar/tabComponentPage/formComponent/lable/lable')">
				<text class="tab-component-page-model-item-name">lable标签组件</text>
			</view>
			<view class="tab-component-page-model-item-container" @click="goComponentPage('/pages/tabBar/tabComponentPage/formComponent/input/input')">
				<text class="tab-component-page-model-item-name">input输入框</text>
			</view>
			<view class="tab-component-page-model-item-container" @click="goComponentPage('/pages/tabBar/tabComponentPage/formComponent/textarea/textarea')">
				<text class="tab-component-page-model-item-name">textarea多行文本输入框</text>
			</view>
			<view class="tab-component-page-model-item-container" @click="goComponentPage('/pages/tabBar/tabComponentPage/formComponent/form/form')">
				<text class="tab-component-page-model-item-name">form表单</text>
			</view>
		</view>

		<view class="tab-component-page-model">
			<view class="tab-component-page-model-title-container">
				<text class="tab-component-page-model-title">4.导航组件</text>
			</view>
			<view class="tab-component-page-model-item-container" @click="goComponentPage('/pages/tabBar/tabComponentPage/navigatorComponent/navigator/navigator')">
				<text class="tab-component-page-model-item-name">navigator</text>
			</view>
		</view>
		
		<view class="tab-component-page-model">
			<view class="tab-component-page-model-title-container">
				<text class="tab-component-page-model-title">5.自定义组件</text>
			</view>
			<view class="tab-component-page-model-item-container" @click="goComponentPage('/pages/tabBar/tabComponentPage/newsCardComponent/newsCardComponent')">
				<text class="tab-component-page-model-item-name">新闻卡片组件</text>
			</view>
			
			<view class="tab-component-page-model-item-container" @click="goComponentPage('/pages/tabBar/tabComponentPage/componentValueTransfer/componentValueTransfer')">
				<text class="tab-component-page-model-item-name">组件传值</text>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			/**
			 * 组件页面跳转
			 * @param {Object} path 页面路径
			 */
			goComponentPage(pagePath){
				uni.navigateTo({
					url:pagePath
				})
			}
		}
	}
</script>

<style>
	.tab-component-page-scroll-view {
		height: calc(100vh - 200rpx);
	}

	.tab-component-page-model {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20rpx;
	}

	.tab-component-page-model-title-container {
		width: 90%;
	}

	.tab-component-page-model-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #0198FF;
	}

	.tab-component-page-model-item-container {
		background-color: white;
		width: 90%;
		border-radius: 20rpx;
		height: 90rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
	}

	.tab-component-page-model-item-name {
		display: block;
		margin-left: 20rpx;
		font-size: 28rpx;
	}
</style>